<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相机平滑跟随测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #000;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 1px solid #333;
            background: #111;
        }
        .info {
            margin-top: 10px;
            padding: 10px;
            background: #222;
            border-radius: 5px;
        }
        .controls {
            margin-top: 10px;
            padding: 10px;
            background: #333;
            border-radius: 5px;
        }
        button {
            margin: 5px;
            padding: 8px 16px;
            background: #4a90e2;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #357abd;
        }
    </style>
</head>
<body>
    <h1>相机平滑跟随测试</h1>
    <canvas id="testCanvas" width="800" height="600"></canvas>
    <div class="info">
        <p>测试相机平滑跟随效果</p>
        <p>使用WASD或方向键移动，观察相机是否平滑跟随</p>
        <p>相机应该平滑跟随玩家，而不是直接跳转</p>
    </div>
    <div class="controls">
        <button onclick="adjustSmoothFactor(0.05)">更平滑 (0.05)</button>
        <button onclick="adjustSmoothFactor(0.1)">中等 (0.1)</button>
        <button onclick="adjustSmoothFactor(0.2)">更快速 (0.2)</button>
        <button onclick="toggleDebug()">切换调试信息</button>
    </div>

    <script src="js/utils.js"></script>
    <script src="js/sprite.js"></script>
    <script src="js/sprites.js"></script>
    <script src="js/pixelArt.js"></script>
    <script src="js/player.js"></script>
    <script>
        // 测试相机系统
        class TestCamera {
            constructor() {
                this.x = 0;
                this.y = 0;
                this.width = 800;
                this.height = 600;
                this.targetX = 0;
                this.targetY = 0;
                this.smoothFactor = 0.1;
            }
            
            updateCamera(player) {
                if (!player) return;
                
                // 计算目标视口位置（跟随玩家）
                this.targetX = player.x - this.width / 2;
                this.targetY = player.y - this.height / 2;
                
                // 平滑跟随玩家
                this.x += (this.targetX - this.x) * this.smoothFactor;
                this.y += (this.targetY - this.y) * this.smoothFactor;
                
                // 限制视口在世界范围内
                this.x = Utils.clamp(this.x, 0, 3000 - this.width);
                this.y = Utils.clamp(this.y, 0, 3000 - this.height);
            }
        }
        
        // 全局变量
        let testPlayer;
        let testCamera;
        let showDebug = true;
        
        // 初始化测试
        function initTest() {
            const canvas = document.getElementById('testCanvas');
            const ctx = canvas.getContext('2d');
            
            // 创建测试玩家
            testPlayer = new Player(400, 300);
            testCamera = new TestCamera();
            
            // 渲染循环
            function render() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 更新相机
                testCamera.updateCamera(testPlayer);
                
                // 保存上下文
                ctx.save();
                
                // 应用相机变换
                ctx.translate(-testCamera.x, -testCamera.y);
                
                // 绘制世界网格
                ctx.strokeStyle = '#333';
                ctx.lineWidth = 1;
                for (let i = 0; i < 3000; i += 100) {
                    ctx.beginPath();
                    ctx.moveTo(i, 0);
                    ctx.lineTo(i, 3000);
                    ctx.stroke();
                }
                for (let i = 0; i < 3000; i += 100) {
                    ctx.beginPath();
                    ctx.moveTo(0, i);
                    ctx.lineTo(3000, i);
                    ctx.stroke();
                }
                
                // 绘制玩家
                ctx.fillStyle = '#4a90e2';
                ctx.beginPath();
                ctx.arc(testPlayer.x, testPlayer.y, testPlayer.size, 0, Math.PI * 2);
                ctx.fill();
                
                // 绘制玩家边框
                ctx.strokeStyle = '#ffffff';
                ctx.lineWidth = 2;
                ctx.stroke();
                
                // 绘制世界边界
                ctx.strokeStyle = '#ff0000';
                ctx.lineWidth = 3;
                ctx.strokeRect(0, 0, 3000, 3000);
                
                // 恢复上下文
                ctx.restore();
                
                // 绘制调试信息
                if (showDebug) {
                    ctx.fillStyle = '#ffffff';
                    ctx.font = '14px Arial';
                    ctx.fillText(`玩家位置: (${Math.round(testPlayer.x)}, ${Math.round(testPlayer.y)})`, 10, 20);
                    ctx.fillText(`相机位置: (${Math.round(testCamera.x)}, ${Math.round(testCamera.y)})`, 10, 40);
                    ctx.fillText(`目标位置: (${Math.round(testCamera.targetX)}, ${Math.round(testCamera.targetY)})`, 10, 60);
                    ctx.fillText(`平滑因子: ${testCamera.smoothFactor}`, 10, 80);
                    ctx.fillText(`世界大小: 3000x3000`, 10, 100);
                }
                
                requestAnimationFrame(render);
            }
            
            render();
        }
        
        // 调整平滑因子
        function adjustSmoothFactor(factor) {
            testCamera.smoothFactor = factor;
        }
        
        // 切换调试信息
        function toggleDebug() {
            showDebug = !showDebug;
        }
        
        // 启动测试
        initTest();
    </script>
</body>
</html> 